<!DOCTYPE html>
<!--[if IE 8]> <html id="replace-style" lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html id="replace-style" lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html id="replace-style" lang="en" class="no-js">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8" />
		<title>工业物联网平台</title>
		<meta content="width=device-width, initial-scale=1.0" name="viewport" />
		<meta content="" name="description" />
		<meta content="" name="author" />
		<link href="old/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="old/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
		<link href="old/css/style.css" rel="stylesheet" type="text/css" />
		<link href="old/css/style-responsive.css" rel="stylesheet" type="text/css" />
		<link href="old/css/default.css" rel="stylesheet" type="text/css" id="style_color" />
		<link href="old/css/daterangepicker.css" rel="stylesheet" type="text/css" />
	</head>

	<body class="page-header-fixed">
		<div class="header navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a class="brand" href="index-s.html">
						<img src="image/logo.png" alt="logo" />
					</a>
					<a href="javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
						<img src="image/menu-toggler.png" alt="" />
					</a>
					<h2 class="title-h2">工业物联网平台</h2>
					<ul class="nav pull-right">
						<li>
							<i class="icon-1"></i>
							<a href="#">生产部</a>
						</li>
						<li>
							<i class="icon-2"></i>
							<a href="#">Admin</a>
						</li>
						<li>
							<i class="icon-3"></i>
							<a href="#">修改密码</a>
						</li>
						<li class="last">
							<i class="icon-4"></i>
							<a href="#">退出</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="page-container">
			<div class="page-sidebar nav-collapse collapse">
				<ul class="page-sidebar-menu">
					<li class="li-hover">
						<div class="sidebar-toggler"></div>
						<span class="menu-title">菜单</span>
					</li>
					<li class="">
						<a href="index.html" class="indexCurrent">
							<i class="icon-1 icon-position"></i>
							<span class="title">首页</span>
						</a>
					</li>
					<li class="">
						<!--最外层-->
						<a href="javascript:;">
							<i class="icon-2 icon-position"></i>
							<span class="title">设备管理</span>
							<span class="arrow "></span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									设备注册管理
									<span class="arrow"></span>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											设备类别管理
											<span class="arrow"></span>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">基本信息</a>
												<a href="#">参数管理</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="visualization.html">
											可视化管理
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									采集终端管理
								</a>
							</li>
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									设备状态管理
									<span class="arrow"></span>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											设备状态查询
											<span class="arrow"></span>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">设备状态数据</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">
											设备状态监控2D
										</a>
									</li>
									<li>
										<a href="#">
											设备状态监控3D
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									设备数据管理
									<span class="arrow"></span>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											实时数据监控
											<span class="arrow"></span>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">实时数据详情</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">
											历史数据查询
										</a>
									</li>
									<li>
										<a href="#">
											告警历史
											<span class="arrow"></span>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">实时数据详情</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									设备能耗管理
									<span class="arrow"></span>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="#">
											能耗设备
										</a>
									</li>
									<li>
										<a href="#">
											能耗查询
										</a>
									</li>
									<li>
										<a href="#">
											能耗分析
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									设备预警管理
									<span class="arrow"></span>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="#">
											预警定义
										</a>
									</li>
									<li>
										<a href="#">
											预警查询
											<span class="arrow"></span>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													预警处理
												</a>
											</li>
											<li>
												<a href="#">
													预警通知
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									设备视频监控
									<span class="arrow"></span>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="#">
											视频设备管理
										</a>
									</li>
									<li>
										<a href="#">
											视频监控管理
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<!--三级菜单-->
						<a class="active" href="javascript:;">
							<i class="icon-3 icon-position"></i>
							<span class="title">统计报表</span>
							<span class="arrow "></span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="javascript:;">
									停机历史统计
								</a>
							</li>
							<li>
								<a href="#">
									预警历史统计
								</a>
							</li>
						</ul>
					</li>
					<li>
						<!--四级菜单-->
						<a class="active" href="javascript:;">
							<i class="icon-4 icon-position"></i>
							<span class="title">系统管理</span>
							<span class="arrow "></span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="#">用户管理</a>
							</li>
							<li>
								<a href="javascript:;">
									角色管理
									<span class="arrow"></span>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="#">
											资源配置
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">登录管理</a>
							</li>
							<li>
								<a href="#">资源管理</a>
							</li>
							<li>
								<a href="#">字典管理</a>
							</li>
						</ul>
					</li>
					<li class="">
						<!--最外层-->
						<a href="javascript:;">
							<i class="icon-5 icon-position"></i>
							<span class="title">日志管理</span>
							<span class="arrow "></span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									访问日志
								</a>
							</li>
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									操作日志
								</a>
							</li>
							<li>
								<a href="layout_horizontal_sidebar_menu.html">
									异常日志
								</a>
							</li>
						</ul>
					</li>
				</ul>
				</li>
				</ul>
			</div>
			<!--主体内容-->
			<div class="page-content" style="width: auto;">
				<!--数据监控栏-->
				<ul class="control-column clearfix">
					<li>
						<p class="first">17:30</p>
						<span class="first">2017-9-12 星期二</span>
					</li>
					<li class="li-2">
						<p id="equipment_num">520</p>
						<span>设备总数(个)</span>
					</li>
					<li class="li-3">
						<p id="runTime">2200</p>
						<span>运行总时长(H)</span>
					</li>
					<li class="li-4">
						<p id="stopTime">161</p>
						<span>停机总时长(H)</span>
					</li>
					<li class="li-5">
						<p id="electricity">17800</p>
						<span>用电累计(KWH)</span>
					</li>
					<li class="last">
						<p id="water">19800</p>
						<span>用水量累计(m³)</span>
					</li>
				</ul>
				<!--可视化数据图表-->
				<div class="charts-wrap clearfix">
					<ul>
						<li class="e-wrap"><div id="main" style="width:100%; height:100%"></div><span class="title" id="dataName">设备运行率</span></li>
						<li class="e-wrap"><div id="main2" style="width:100%; height:100%"></div><span class="title" id="dataName_2">设备告警率</span></li>
						<li class="e-wrap last"><div id="main3" style="width:100%; height:100%"></div><span class="title" id="dataName_3">预警处理率</span></li>
					</ul>
				</div>
			</div>
		</div>

		<script src="old/js/jquery-1.10.1.min.js" type="text/javascript"></script>
		<script src="old/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
		<script src="old/js/bootstrap.min.js" type="text/javascript"></script>
		<!--[if lt IE 9]>
			<script src="old/js/excanvas.min.js"></script>
			<script src="old/js/respond.min.js"></script>  
		<![endif]-->
		<script src="old/js/jquery.slimscroll.min.js" type="text/javascript"></script>
		<script src="old/js/jquery.blockui.min.js" type="text/javascript"></script>
		<script src="old/js/daterangepicker.js" type="text/javascript"></script>
		<script src="old/js/app.js" type="text/javascript"></script>
		<script src="old/js/echarts-all.js" type="text/javascript" charset="utf-8"></script>
		<script src="old/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script>
			jQuery(document).ready(function() {
				//动态设置图表外框的高度
				function setWidth(){
					var mainWidth = $('#main').width(),
					mainHeight = mainWidth*0.7;
					$('.e-wrap').height(mainHeight);
				}
				setWidth();

				//------------------------------图表配置------------------------------------>>
		        var myChart = echarts.init(document.getElementById('main'));
		        var myChart2 = echarts.init(document.getElementById('main2'));
		        var myChart3 = echarts.init(document.getElementById('main3'));

				var option = {
				    tooltip : {
				        formatter: "{c}%"
				    },
				    toolbox: {
				        show : false,
				        feature : {
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    series: [
				        {
				            name: '',
				            type: 'gauge',
				            min:0,
				            max:100,
				            data: [{value: 0, name: ''}],
				            axisLine: {            // 坐标轴线
				                lineStyle: {       // 属性lineStyle控制线条样式
				                    width: 10,
				                     color: [[0.2, '#ff4200'], [0.5, '#4584b9'], [1, '#65e725']]
				                }
				            },
				            axisTick: {            // 坐标轴小标记
				                length :15,        // 属性length控制线长
				                lineStyle: {       // 属性lineStyle控制线条样式
				                    color: 'auto'
				                }
				            },
				            detail:{
							    show : true,
							    width: 100,
							    height: 40,
							    formatter:'{value}%',
							    offsetCenter: [0, '30%'],
							    textStyle: {
							        fontSize : 20
							    }
							},
							pointer:{
							    length : '60%',
							    width : 5,
							    color : 'auto'
							},
							startAngle: 190,
							endAngle: -10,
							radius: ['95%','95%'],
							center: ['50%','70%']
				        }
				    ]
				    
				};
				var option2 = {
				    tooltip : {
				        formatter: "{c}%"
				    },
				    toolbox: {
				        show : false,
				        feature : {
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    series: [
				        {
				            name: '',
				            type: 'gauge',
				            min:0,
				            max:100,
				            data: [{value: 0, name: ''}],
				            axisLine: {            // 坐标轴线
				                lineStyle: {       // 属性lineStyle控制线条样式
				                    width: 10,
				                     color: [[0.2, '#65e725'], [0.5, '#4584b9'], [1, '#ff4200']]
				                }
				            },
				            axisTick: {            // 坐标轴小标记
				                length :15,        // 属性length控制线长
				                lineStyle: {       // 属性lineStyle控制线条样式
				                    color: 'auto'
				                }
				            },
				            detail:{
							    show : true,
							    width: 100,
							    height: 40,
							    formatter:'{value}%',
							    offsetCenter: [0, '30%'],
							    textStyle: {
							        fontSize : 20
							    }
							},
							pointer:{
							    length : '60%',
							    width : 5,
							    color : 'auto'
							},
							startAngle: 190,
							endAngle: -10,
							radius: ['95%','95%'],
							center: ['50%','70%']
				        }
				    ]
				    
				};
				var option3 = {
				    tooltip : {
				        formatter: "{c}%"
				    },
				    toolbox: {
				        show : false,
				        feature : {
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    series: [
				        {
				            name: '',
				            type: 'gauge',
				            min:0,
				            max:100,
				            data: [{value: 0, name: ''}],
				            axisLine: {            // 坐标轴线
				                lineStyle: {       // 属性lineStyle控制线条样式
				                    width: 10,
				                     color: [[0.1, '#ff4200'], [0.6, '#e4ba30'], [1, '#65e725']]
				                }
				            },
				            axisTick: {            // 坐标轴小标记
				                length :15,        // 属性length控制线长
				                lineStyle: {       // 属性lineStyle控制线条样式
				                    color: 'auto'
				                }
				            },
				            detail:{
							    show : true,
							    width: 100,
							    height: 40,
							    formatter:'{value}%',
							    offsetCenter: [0, '30%'],
							    textStyle: {
							        fontSize : 20
							    }
							},
							pointer:{
							    length : '60%',
							    width : 5,
							    color : 'auto'
							},
							startAngle: 190,
							endAngle: -10,
							radius: ['95%','95%'],
							center: ['50%','70%']
				        }
				    ]
				    
				};
				option.series[0].data[0].value = 90.62;
				myChart.setOption(option, true);
//				setInterval(function () {
//				},2000);
				//--------------------------------------------------------------------------------->>
			    option2.series[0].data[0].value = 26.34;
			    myChart2.setOption(option2, true);
		        //--------------------------------------------------------------------------------->>
			    option3.series[0].data[0].value = 96.19;
			    myChart3.setOption(option3, true);
			});
		</script>
	</body>

</html>